<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('编辑角色')"/>
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet">
    <style type="text/css">
    	.col-sm-3 {width: 27% !important;}
    </style>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" th:action="@{/sys/role/update}" id="roleForm">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" value="保存" onclick="save()">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>角色信息</h5>
                    </div>
                    <div class="ibox-content">
                        <input id="roleId" type="hidden" th:value="${role.roleId}" name="roleId">
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>角色名称：</label>
                            <div class="col-sm-6">
                                <input name="roleName" th:value="${role.roleName}" type="text" placeholder="角色名称"
                                       class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>所属组织机构：</label>
                            <div class="col-sm-6">
                                <input type="hidden" th:value="${role.deptId}" name="deptId" id="deptId"
                                       class="form-control"/>
                                <input onclick="addPid()" th:value="${role.deptName}" readonly="readonly" type="text"
                                       name="deptName" id="deptName" placeholder="点击选择" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-6">
                                <textarea name="remark" class="form-control" th:text="${role.remark}"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>数据权限</h5>
                    </div>
                    <div class="ibox-content">
                        <ul id="deptZtree" class="ztree" style="background-color: inherit;margin: 0;border: 0;"></ul>
                        <input type="hidden" id="deptZtreeData" th:value="${role.deptIdList}" name="deptIdList">
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>功能权限</h5>
                    </div>
                    <div class="ibox-content">
                        <ul id="menuZtree" class="ztree" style="background-color: inherit;margin: 0;border: 0;"></ul>
                        <input type="hidden" id="menuZtreeData" th:value="${role.menuIdList}" name="menuIdList">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">

    $(document).ready(function () {
        ZTree.init('deptZtree', ctxPath+ "/sys/dept/getUserDept", {
            asyncSuccess: deptTreeDataOver,
            data: {
                key: {
                    name: "name"
                },
                simpleData: {
                    enable: true,
                    idKey: "deptId",
                    pIdKey: "parentId",
                    rootPId: null
                }
            },check: {
                enable: true,
                nocheckInherit:true,
                chkboxType:{"Y" : "", "N" : "" }
            }
        });
        ZTree.init('menuZtree', ctxPath+ "/sys/menu/nav", {
            asyncSuccess: menuTreeDataOver,
            data: {
                key: {
                    name: "name"
                },
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "parentId",
                    rootPId: null
                }
            },check: {
                enable:true,
                nocheckInherit:true,
                chkboxType:{"Y" : "ps", "N" : "ps" }
            }
        });

        Page.validateForm("#roleForm", {
            tips:"确定保存？",
            rules: {
                roleName: {
                    required: true
                }
            },
            messages: {
                roleName: {
                    required: "角色名称不能为空"
                }
            }
        })
    });

    /**
     * 保存
     */
    function save() {
        var deptTreeObj = $.fn.zTree.getZTreeObj("deptZtree");
        var nodes=deptTreeObj.getCheckedNodes(true);
        var deptIdList = new Array();
        for(var i=0; i<nodes.length; i++) {
            deptIdList.push(nodes[i].deptId);
        }
        $("#deptZtreeData").val(deptIdList);

        var menuTreeObj = $.fn.zTree.getZTreeObj("menuZtree");
        var menuNodes=menuTreeObj.getCheckedNodes(true);
        var menuIdList = new Array();
        for(var i=0; i<menuNodes.length; i++) {
            menuIdList.push(menuNodes[i].menuId);
        }
        $("#menuZtreeData").val(menuIdList);

        if($("#roleForm").valid()) {
            Page.ajaxPOST(ctxPath+"/sys/role/update", $('#roleForm').serialize(), function (res) {
                Dialog.msg("编辑成功!",function(){
                    Dialog.closeFrame(window.name)
                });
            })
        }
    }

    function menuTreeDataOver() {
        var menuTreeObj = $.fn.zTree.getZTreeObj("menuZtree");
        var menuIds = $("#menuZtreeData").val();
        if (menuIds != '') {
            menuIds = menuIds.replace("[", "").replace("]", "").split(",");
        }
        for(var i=0; i<menuIds.length; i++) {
            var id = parseInt(menuIds[i]);
            var node = menuTreeObj.getNodeByParam("menuId", id);
            if (node != null) {
                menuTreeObj.checkNode(node, true, false);
            }
        }
    }

    //弹出组织机构列表
    function addPid() {
        Dialog.openUrl("组织机构列表", ctxPath+"/modules/sys/dept/dept_pop_tree.html", {area: ['300px', '400px']});
    }

    function toDeptId(treeNode) {
        $("#deptId").val(treeNode.deptId);
        $("#deptName").val(treeNode.name);
    }

    function deptTreeDataOver() {
        var deptTreeObj = $.fn.zTree.getZTreeObj("deptZtree");
        var deptIds = $("#deptZtreeData").val();
        if (deptIds != '') {
            deptIds = deptIds.replace("[", "").replace("]", "").split(",");
        }
        for(var i=0; i<deptIds.length; i++) {
            var id = parseInt(deptIds[i]);
            var node = deptTreeObj.getNodeByParam("deptId", id);
            if (node != null) {
                deptTreeObj.checkNode(node, true, false);
            }
        }
    }
</script>
</body>
</html>
